<template>
  <div class="exam-wrapper">
    <ExamContent
      :disabled="examDisabled"
      :contentData="examContent"
      :isHelp="isHelp"
      :helpData="helpData"
      @onClickAnchor="onClickAnchor"
      @onCloseHelp="toggleHelp(false)"
    />
    <Chat
      ref="chat"
      @onSubmit="onSubmit"
      @onEnd="onEnd"
      @onReset="onReset"
      @toggleHelp="toggleHelp"
      @onChangeCourse="onChangeCourse"
    />
  </div>
</template>

<script>
import ExamContent from "./components/examContent.vue";
import Chat from "./components/chat";
import {
  selectCourseFlow,
  selectNextPicture,
  uploadCourseTrack,
  over,
  selectCourseHint,
} from "@/api";
import moment from "moment";

export default {
  name: "ExamPage",
  components: {
    ExamContent,
    Chat,
  },
  data() {
    return {
      examContent: {},
      trackList: [],
      operateOrder: 1,
      bdCourseId: "",
      examDisabled: false,
      isHelp: false,
      helpData: {},
    };
  },
  computed: {
    userId() {
      return this.$store.state.user.userId;
    },
  },
  methods: {
    async onChangeCourse(bdCourseId) {
      const postData = {
        uuid: this.userId,
        bdCourseId,
      };
      this.bdCourseId = bdCourseId;
      const res = await selectCourseFlow(postData);
      this.trackList = [];
      this.examContent = res;
      this.examDisabled = false;
    },
    // 判断当前pageId是否被添加进trackList,如果没有则加入
    addCurrentPage() {
      const currentPageId = this.examContent.pageId;
      const isHas = this.trackList.find(
        (item) => item.pageId === currentPageId
      );

      if (isHas) return;

      this.trackList.push({
        pageId: currentPageId,
        elementId: "",
        operateOrder: "",
        elementClickTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      });
    },
    async onSubmit({ startTime, endTime }) {
      this.examDisabled = true;
      this.addCurrentPage();

      const postData = {
        uuid: this.userId,
        bdCourseId: this.bdCourseId,
        startDate: startTime,
        endDate: endTime,
        simopTrack: this.trackList,
      };
      const res = await uploadCourseTrack(postData);
      const { score, totalScore, rollbackId } = res;
      this.$refs.chat.messageList.push({
        type: "text",
        customType: "card",
        author: `me`,
        data: {
          text: "",
          score,
          totalScore,
          rollbackId,
          bdCourseId: this.bdCourseId,
        },
      });
      this.$refs.chat.index++;
      this.$refs.chat.btnDisabled = false;
    },
    async onEnd({ startTime, endTime }) {
      this.addCurrentPage();
      const postData = {
        uuid: this.userId,
        bdCourseId: this.bdCourseId,
        startDate: startTime,
        endDate: endTime,
        simopTrack: this.trackList,
      };
      await over(postData);
      this.$router.push("/exam-result");
    },
    onReset(bdCourseId) {
      this.onChangeCourse(bdCourseId);
    },
    async toggleHelp(helpStatus) {
      if (!helpStatus || this.examDisabled) {
        return (this.isHelp = false);
      }

      const pageId = this.examContent.pageId;
      const res = await selectCourseHint({ pageId });
      this.helpData = res;
      this.isHelp = helpStatus;
    },
    async queryNextPage(sendPageId) {
      const res = await selectNextPicture({ sendPageId });
      this.examContent = res;
    },
    onClickAnchor(data) {
      const trackData = {
        pageId: this.examContent.pageId,
        elementId: data.elementId,
        operateOrder: this.operateOrder++,
        elementClickTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      };
      this.trackList.push(trackData);
      this.queryNextPage(data.sendPageId);
    },
    confirmExit(event) {
      // 提示消息
      const confirmationMessage = "您确定要离开吗？";
      event.returnValue = confirmationMessage;

      return confirmationMessage;
    },
    removeListener() {
      window.removeEventListener("beforeunload", this.confirmExit);
    },
  },
  mounted() {
    window.addEventListener("beforeunload", this.confirmExit);
  },
  beforeDestroy() {
    this.removeListener();
  },
};
</script>

<style lang="scss" scoped>
.exam-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
</style>
